<template>
  <div class="main" v-if="zfNameflag">
    <govheader title="化工产业大脑 · 环境保护"></govheader>
    <govnavigation></govnavigation>
    <el-row class="content" :gutter="10" style="padding-left: 15px;padding-right: 5px;" v-if="zfNameflag">
      <el-col :span="8" class="content-left" style="width: 34.046%">
        <el-col class="box">
          <div class="title">重点企业环境信用评价</div>
          <div class="content-body">
            <div style="width: 100%;height: 174px;background: #E0EBFE;border-radius: 10px;position: relative;">
              <div v-show="echarts2ShowFlag" id="annular2" style="width: 100%;height: 174px"></div>
              <div v-show="!echarts2ShowFlag" style="width: 100%;height: 174px;color: #909399;font-size: 14px;text-align: center;line-height: 170px;">暂无数据</div>
            </div>
          </div>
        </el-col>
        <el-col class="box" style="margin-bottom: 0px;">
          <div class="title">废气排放监测</div>
          <div class="content-body">
            <div style="width: 50%;">
              <div class="craft-body" style="float: left;">
                <div class="craft-title">
                  <span class="title-content">监测点数量</span>
                </div>
                <div class="craft-value">{{monitoringNum}}</div>
              </div>
              <div class="craft-body" style="margin-left: 10px;">
                <div class="craft-title">
                  <span class="title-content">监测气体类型</span>
                </div>
                <div class="craft-value">{{monitoringGasType}}</div>
              </div>
              <div class="craft-body" style="margin-top: 10px;">
                <div class="craft-title">
                  <span class="title-content">超标点位数</span>
                </div>
                <div class="craft-value">{{overStandardNum}}</div>
              </div>
              <div class="craft-body" style="margin-top: 10px;margin-left: 10px;">
                <div class="craft-title">
                  <span class="title-content">超标最多物质</span>
                </div>
                <div class="craft-value">{{exceedingMaterial}}</div>
              </div>
            </div>
            <div id="annular3" style="float: right;width: 50%;height: 140px"></div>
            <div style="width: 100%;margin-top: 20px;">
              <div class="tabs">
                <div :class="activeTab1 === 'so2' ? 'selectActive' : ''" @click="activeClick1('so2')">SO2</div>
                <div :class="activeTab1 === 'nox' ? 'selectActive' : ''" @click="activeClick1('nox')" style="border-left: 1px solid #7db2d0">NOX</div>
                <div :class="activeTab1 === 'pm' ? 'selectActive' : ''" @click="activeClick1('pm')" style="border-left: 1px solid #7db2d0">PM</div>
              </div>
              <el-table
                ref="table1"
                :data="tableData1"
                style="width: 100%;margin-top: 10px;"
                height="287px"
                :cell-style="{padding:'6px 0px'}"
                :header-cell-style="{backgroundColor:'#CADFFF', color:'#4A6899', padding:'6px 0px'}"
                :cell-class-name="tableRowClassName">
                <el-table-column type="index" label="排名" width="60" align="center"></el-table-column>
                <el-table-column property="entName" align="center" :show-overflow-tooltip="true" label="企业名称"></el-table-column>
                <el-table-column property="monitoringName" align="center" label="监测点名称"></el-table-column>
                <el-table-column property="detectionValue" align="center" label="检测值ppm"></el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-col>
      <el-col :span="7" class="content-center" style="background-color: (255, 255, 255, 0.5);width: 31.9%;">
        <div style="position: relative;">
          <div id="annular1" style="width: 100%;height: 491px"></div>
          <div class="legend-body">
            <div class="legend-content" @click="changeMap('废气监测点')">
              <div class="legend-point" style="background: #65D77B;"></div>
              <div class="legend-title">废气监测点</div>
              <div class="legend-value" style="color: #65D77B;">{{gasSum}}</div>
            </div>
            <div class="legend-content" @click="changeMap('大气监测点')">
              <div class="legend-point" style="background: #009CEC;"></div>
              <div class="legend-title">大气监测点</div>
              <div class="legend-value" style="color: #009CEC;">{{airSum}}</div>
            </div>
            <div class="legend-content" @click="changeMap('污水监测点')">
              <div class="legend-point" style="background: #F59A23;"></div>
              <div class="legend-title">污水监测点</div>
              <div class="legend-value" style="color: #F59A23;">{{waterSum}}</div>
            </div>
          </div>
        </div>
        <div class="box" style="margin-top: 10px;margin-bottom: 0px;width: 49%;margin-right: 2%;float: left;">
          <div class="title">危险废物处理</div>
          <div class="content-body">
            <div v-show="echarts5ShowFlag" id="annular5" style="width: 100%;height: 209px"></div>
            <div v-show="!echarts5ShowFlag" style="width: 100%;height: 209px;color: #909399;font-size: 14px;text-align: center;line-height: 200px;">暂无数据</div>
          </div>
        </div>
        <div class="box" style="margin-top: 10px;margin-bottom: 0px;width: 49%;float: left;">
          <div class="title">固体废物处理</div>
          <div class="content-body">
            <div v-show="echarts4ShowFlag" id="annular4" style="width: 100%;height: 209px"></div>
            <div v-show="!echarts4ShowFlag" style="width: 100%;height: 209px;color: #909399;font-size: 14px;text-align: center;line-height: 200px;">暂无数据</div>
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="content-right" style="width: 34.046%">
        <el-row :gutter="15">
          <el-col :span="24">
            <div class="box" style="position: relative;">
              <div class="title">地区环境空气质量</div>
              <div class="content-body">
                <div class="tabs">
                  <div :class="activeTab2 === 'AQI' ? 'selectActive' : ''" @click="activeClick2('AQI')">AQI</div>
                  <div :class="activeTab2 === 'CO' ? 'selectActive' : ''" @click="activeClick2('CO')" style="border-left: 1px solid #7db2d0">CO</div>
                  <div :class="activeTab2 === 'O3' ? 'selectActive' : ''" @click="activeClick2('O3')" style="border-left: 1px solid #7db2d0">O3</div>
                  <div :class="activeTab2 === 'SO2' ? 'selectActive' : ''" @click="activeClick2('SO2')" style="border-left: 1px solid #7db2d0">SO2</div>
                  <div :class="activeTab2 === 'NO2' ? 'selectActive' : ''" @click="activeClick2('NO2')" style="border-left: 1px solid #7db2d0">NO2</div>
                  <div :class="activeTab2 === 'PM2.5' ? 'selectActive' : ''" @click="activeClick2('PM2.5')" style="border-left: 1px solid #7db2d0">PM2.5</div>
                  <div :class="activeTab2 === 'PM10' ? 'selectActive' : ''" @click="activeClick2('PM10')" style="border-left: 1px solid #7db2d0">PM10</div>
                </div>
                <el-table
                  ref="table2"
                  :data="tableData2"
                  style="width: 100%;"
                  height="190px"
                  :cell-style="{padding:'6px 0px'}"
                  :header-cell-style="{backgroundColor:'#CADFFF', color:'#4A6899', padding:'6px 0px'}"
                  :cell-class-name="tableRowClassName">
                  <el-table-column type="index" label="排名" width="60" align="center"></el-table-column>
                  <el-table-column property="name" align="center" :show-overflow-tooltip="true" label="地区名称"></el-table-column>
                  <el-table-column property="monitoringName" align="center" label="监测点名称"></el-table-column>
                  <el-table-column property="detectionValue" align="center" label="检测值ppm"></el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <div class="box">
              <div class="title">环保处罚单数</div>
              <div class="content-body">
                <div v-show="echarts6ShowFlag" id="annular6" style="width: 100%;height: 184px;"></div>
                <div v-show="!echarts6ShowFlag" style="width: 100%;height: 184px;color: #909399;font-size: 14px;text-align: center;line-height: 180px;">暂无数据</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <div class="box" style="margin-bottom: 0px;">
              <div class="title">污水排放总量</div>
              <div class="content-body">
                <div v-show="echarts7ShowFlag" id="annular7" style="width: 100%;height: 184px;"></div>
                <div v-show="!echarts7ShowFlag" style="width: 100%;height: 184px;color: #909399;font-size: 14px;text-align: center;line-height: 180px;">暂无数据</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import dd from 'gdt-jsapi'
import govheader from '@/components/govheader'
import govnavigation from '@/components/govnavigation'
const echarts = require('echarts')
export default {
  components: { govheader, govnavigation },
  name: 'zfPerMuBenefit',
  data () {
    return {
      selectLegend: '废气监测点',
      activeTab1: 'so2',
      activeTab2: 'AQI',
      zfNameflag: true,
      tableData1: [],
      tableData2: [],
      option1: {},
      option2: {},
      option3: {},
      option4: {},
      option5: {},
      option6: {},
      option7: {},
      myChart1: {},
      myChart2: {},
      myChart3: {},
      myChart4: {},
      myChart5: {},
      myChart6: {},
      myChart7: {},
      center: {
        '杭州市': [119.539823, 29.870667],
        '宁波市': [121.580925, 29.676002],
        '温州市': [120.455764, 27.880064],
        '嘉兴市': [120.802189, 30.652582],
        '湖州市': [119.873415, 30.780146],
        '绍兴市': [120.580041, 29.767623],
        '金华市': [119.999656, 29.105538],
        '衢州市': [118.705947, 28.875889],
        '舟山市': [122.233931, 30.231275],
        '台州市': [121.117506, 28.682316],
        '丽水市': [119.579372, 28.183492]
      },
      option1Data: [],
      option1Scatter1Data: [],
      option1Scatter2Data: [],
      option1Scatter3Data: [],
      option2Data: [],
      option3Data: [],
      option4Data: [],
      option5Data: [],
      option6Data: [],
      gasSum: 0,
      airSum: 0,
      waterSum: 0,
      monitoringNum: 0,
      monitoringGasType: 0,
      overStandardNum: 0,
      exceedingMaterial: '暂无数据',
      echarts2ShowFlag: true,
      echarts4ShowFlag: true,
      echarts5ShowFlag: true,
      echarts6ShowFlag: true,
      echarts7ShowFlag: true,
      table1Interval: null,
      table2Interval: null,
      echarts2Interval: null,
      echarts4Interval: null
    }
  },
  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({}).then(res => {
        if (res) {
          let params = {
            applicationFlag: '20',
            authCode: res.auth_code
          }
          this.$http.post(`/home/sys/loginfree/authentication`, params)
            .then(({ data: res }) => {
              console.log('res2:', res)
              this.$store.commit('zfName', res.data.lastName)
              if (res.code !== 0) {
                this.zfNameflag = false
              }
            }).catch(() => {
              this.zfNameflag = false
            })
        }
      }).catch(() => {
        this.zfNameflag = false
      })
    }
  },
  // 调用
  mounted () {
    this.getData()
  },
  beforeDestroy () {
    clearInterval(this.table1Interval)
    clearInterval(this.table2Interval)
    clearInterval(this.echarts2Interval)
    clearInterval(this.echarts4Interval)
  },
  methods: {
    changeMap (legend) {
      if (legend !== this.selectLegend) {
        this.selectLegend = legend
        this.option1.series[1].name = legend
        if (legend === '废气监测点') {
          this.option1.series[1].itemStyle.color = '#65D77B'
          this.option1.series[1].data = this.option1Scatter1Data
        } else if (legend === '大气监测点') {
          this.option1.series[1].itemStyle.color = '#009CEC'
          this.option1.series[1].data = this.option1Scatter2Data
        } else if (legend === '污水监测点') {
          this.option1.series[1].itemStyle.color = '#F59A23'
          this.option1.series[1].data = this.option1Scatter3Data
        }
        this.myChart1.setOption(this.option1)
      }
    },
    getData () {
      this.$http.post(`/home/government/govEnvProtect/envProtect`,
        {
          gasType: this.activeTab1,
          airType: this.activeTab2
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.monitoringNum = res.data.envProtect.monitoringNum
            this.overStandardNum = res.data.envProtect.overStandardNum

            this.tableData1 = res.data.envProtect.gasRankList
            this.tableData2 = res.data.envProtect.airQualityRankList

            let govEnvAirMonitoringVoList = {}
            let govEnvWasteGasMonitoringVoList = {}
            let govEnvWasteWaterMonitoringVoList = {}
            res.data.envProtect.govEnvWasteGasMonitoringVoList.forEach(item => {
              govEnvAirMonitoringVoList[item.name] = item.num
            })
            res.data.envProtect.govEnvAirMonitoringVoList.forEach(item => {
              govEnvWasteGasMonitoringVoList[item.name] = item.num
            })
            res.data.envProtect.govEnvWasteWaterMonitoringVoList.forEach(item => {
              govEnvWasteWaterMonitoringVoList[item.name] = item.num
            })

            for (let i in govEnvAirMonitoringVoList) {
              this.gasSum += govEnvWasteGasMonitoringVoList[i]
              this.airSum += govEnvAirMonitoringVoList[i]
              this.waterSum += govEnvWasteWaterMonitoringVoList[i]
              this.option1Data.push({
                name: i,
                gasCount: govEnvWasteGasMonitoringVoList[i],
                airCount: govEnvAirMonitoringVoList[i],
                waterCount: govEnvWasteWaterMonitoringVoList[i]
              })
            }

            this.option1Scatter1Data = this.option1Data.map(item => {
              return this.center[item.name].concat(item.gasCount)
            })
            this.option1Scatter2Data = this.option1Data.map(item => {
              return this.center[item.name].concat(item.airCount)
            })
            this.option1Scatter3Data = this.option1Data.map(item => {
              return this.center[item.name].concat(item.waterCount)
            })

            this.option2Data = res.data.envProtect.govEnvEntLevelVoList

            this.option3Data = res.data.envProtect.normalPer

            this.option4Data = [
              { name: '产生量', value: res.data.envProtect.dangerWaste.production },
              { name: '贮存量', value: res.data.envProtect.dangerWaste.storageCapacity },
              { name: '运输量', value: res.data.envProtect.dangerWaste.transferAmount },
              { name: '处理量', value: res.data.envProtect.dangerWaste.disposalVolume }
            ]

            this.option5Data = [
              { name: '产生量', value: res.data.envProtect.solidWaste.production },
              { name: '贮存量', value: res.data.envProtect.solidWaste.storageCapacity },
              { name: '运输量', value: res.data.envProtect.solidWaste.transferAmount },
              { name: '处理量', value: res.data.envProtect.solidWaste.disposalVolume }
            ]

            this.option6XData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            this.option6Bar1Data = res.data.envProtect.govEnvPunishLastYearList
            this.option6Bar2Data = res.data.envProtect.govEnvPunishThisYearList

            this.option7XData = res.data.envProtect.monthList
            this.option7BarData = res.data.envProtect.monthDataList
            this.option7LineData = res.data.envProtect.qualifiedPerList

            this.echarts2ShowFlag = this.option2Data.length > 0
            this.echarts4ShowFlag = this.option4Data.length > 0
            this.echarts5ShowFlag = this.option5Data.length > 0
            this.echarts6ShowFlag = this.option6XData.length > 0
            this.echarts7ShowFlag = this.option7XData.length > 0

            this.renderMyChart1()
            this.renderMyChart2()
            this.renderMyChart3()
            this.renderMyChart4()
            this.renderMyChart5()
            this.renderMyChart6()
            this.renderMyChart7()

            this.getright_table('table1')
            this.getright_table('table2')
          } else {
            this.$message({ message: res.message, type: 'warning' })
          }
        })
    },
    // 浙江省地图
    renderMyChart1 () {
      this.myChart1 = echarts.init(document.getElementById('annular1'))
      let uploadedDataURL = require('./zhejiang.json')

      echarts.registerMap('js', uploadedDataURL)
      this.option1 = {
        tooltip: {
          trigger: 'item',
          formatter: function (para) {
            if (para.seriesType === 'map') {
              return para.data.name + '<br>' +
                '废气监测点 : ' + para.data.gasCount + '<br>' +
                '大气监测点 : ' + para.data.airCount + '<br>' +
                '污水监测点 : ' + para.data.waterCount + '<br>'
            } else {
              return para.seriesName + ' : ' + para.data[2]
            }
          }
        },
        geo: [
          {
            map: 'js',
            roam: false, // 是否允许缩放
            zoom: 0.9, // 默认显示级别
            layoutSize: '100%',
            layoutCenter: ['50%', '50%'],
            itemStyle: {
              areaColor: 'rgba(156, 216, 255, 0.7)',
              borderColor: 'rgb(27, 172, 255)',
              borderWidth: 1
            },
            emphasis: {
              itemStyle: {
                areaColor: '#005DDC'
              },
              label: {
                show: true,
                color: '#fff'
              }
            },
            label: {
              show: true,
              color: '#333333'
            },
            zlevel: 3
          }
        ],
        series: [
          {
            type: 'map',
            geoIndex: 0,
            data: this.option1Data
          },
          {
            name: '废气监测点',
            type: 'scatter',
            coordinateSystem: 'geo',
            itemStyle: {
              color: '#65D77B'
            },
            label: {
              normal: {
                show: true,
                color: '#fff',
                position: 'inside',
                fontSize: 10,
                formatter: function (para) {
                  return para.data[2]
                }
              }
            },
            symbol: 'circle',
            symbolOffset: [0, 20],
            symbolSize: 25,
            data: this.option1Scatter1Data,
            zlevel: 10
          }
        ]
      }
      this.myChart1.setOption(this.option1)
    },
    renderMyChart2 () {
      this.myChart2 = echarts.init(document.getElementById('annular2'))
      this.option2 = {
        color: ['#00A3FF', '#00DBD4', '#A885F0', '#5F83FF', '#65D77B'],
        tooltip: {
          trigger: 'item',
          extraCssText:'z-index: 100'
        },
        legend: {
          show: true,
          orient: 'vertical',
          bottom: '15%',
          right: '20%'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['30%', '50%'],
            data: this.option2Data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              show: true,
              position: 'outside',
              formatter: '{d}%',
              fontSize: '12'
            }
          }
        ]
      }
      this.myChart2.setOption(this.option2)
      this.autoPlay(this.myChart2, this.option2, 'echarts2Interval')
    },
    renderMyChart3 () {
      this.myChart3 = echarts.init(document.getElementById('annular3'))
      var data = {
        value: this.option3Data,
        percent: (this.option3Data / 100).toFixed(2)
      }
      this.option3 = {
        series: [
          // 内侧刻度
          {
            type: 'gauge',
            radius: '115%', // 位置
            center: ['50%', '70%'],
            min: 0,
            max: 100,
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              show: true,
              lineStyle: {
                // 轴线样式
                width: 100, // 宽度
                color: [
                  [ data.percent, '#C4E4FF' ],
                  [ 1, '#C6D8FF' ]
                ] // 颜色
              }
            },
            axisTick: {
              // 刻度
              show: false,
              splitNumber: 2,
              length: 10
            },
            splitLine: {
              // 分割线
              show: false
            },
            axisLabel: {
              // 刻度标签
              show: false
            },
            pointer: {
              // 仪表盘指针
              show: false
            },
            detail: {
              // 仪表盘详情
              show: false
            }
          },
          // 中间白色半圆
          {
            type: 'gauge',
            radius: '65%', // 位置
            center: ['50%', '70%'],
            min: 0,
            max: 100,
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              show: true,
              lineStyle: {
                // 轴线样式
                width: 150, // 宽度
                color: [
                  [
                    1,
                    new echarts.graphic.RadialGradient(0.5, 1, 1, [{
                      offset: 1,
                      color: '#F2F7FF'
                    },
                    {
                      offset: 0.41,
                      color: '#F2F7FF'
                    },
                    {
                      offset: 0.4,
                      color: '#C8D8F2'
                    },
                    {
                      offset: 0,
                      color: '#C8D8F2'
                    }
                    ])
                  ]
                ] // 颜色
              }
            },
            axisTick: {
              // 刻度
              show: false
            },
            splitLine: {
              // 分割线
              show: false
            },
            axisLabel: {
              // 刻度标签
              show: false
            },
            pointer: {
              // 仪表盘指针
              show: false
            },
            detail: {
              // 仪表盘详情
              show: false
            }
          },
          // 内侧轴线
          {
            type: 'gauge',
            radius: '120%', // 位置
            center: ['50%', '70%'],
            min: 0,
            max: 100,
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              show: true,
              lineStyle: {
                // 轴线样式
                width: 10, // 宽度
                color: [
                  [data.percent, '#4FC0FF'],
                  [1, '#5F83FF']
                ] // 颜色
              }
            },
            pointer: {
              // 仪表盘指针
              show: false
            },
            axisTick: {
              // 刻度
              show: false
            },
            splitLine: {
              // 分割线
              show: false
            },
            axisLabel: {
              // 刻度标签
              show: false
            },
            detail: {
              // 仪表盘详情
              show: false
            }
          },
          // 指针
          {
            type: 'gauge',
            radius: '170%', // 位置
            center: ['50%', '70%'],
            min: 0,
            max: 100,
            startAngle: 180,
            endAngle: 0,
            axisLine: {
              show: false
            },
            data: [{
              value: data.value,
              name: '总体正常率'
            }],
            pointer: {
              // 仪表盘指针
              show: true
            },
            itemStyle: {
              color: '#758FB9',
              borderColor: '#B1C4E3',
              borderWidth: '1',
              borderType: 'solid'
            },
            axisTick: {
              // 刻度
              show: false
            },
            splitLine: {
              // 分割线
              show: false
            },
            axisLabel: {
              // 刻度标签
              show: false
            },
            detail: {
              // 仪表盘详情
              show: true,
              formatter: function (value) {
                return value + '%'
              },
              offsetCenter: ['35%', '25%'],
              fontSize: '18px',
              color: '#08b5d6'
            },
            title: {
              show: true,
              offsetCenter: ['-30%', '25%'],
              color: '#08b5d6'
            }
          }
        ]
      }
      this.myChart3.setOption(this.option3)
    },
    renderMyChart4 () {
      this.myChart4 = echarts.init(document.getElementById('annular4'))
      this.option4 = {
        color: ['#00A3FF', '#00DBD4', '#A885F0', '#5F83FF', '#65D77B', '#F3A52A', '#F7702E'],
        tooltip: {
          trigger: 'item',
          confine: true
        },
        legend: {
          show: false,
          orient: 'vertical',
          top: '20%',
          right: '20%'
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['50%', '50%'],
            data: this.option4Data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              label: {
                show: true
              }
            },
            label: {
              show: false,
              position: 'center',
              formatter: '{b}\n{c}吨',
              fontSize: '20',
              fontWeight: 'bold',
              lineHeight: 25,
              width: 100,
              overflow: 'truncate'
            }
          }
        ]
      }
      this.myChart4.setOption(this.option4)
      this.autoPlay(this.myChart4, this.option4, 'echarts4Interval')
    },
    renderMyChart5 () {
      this.myChart5 = echarts.init(document.getElementById('annular5'))
      this.option5 = {
        color: ['#00A3FF', '#00DBD4', '#A885F0', '#5F83FF', '#65D77B', '#F3A52A', '#F7702E'],
        tooltip: {
          trigger: 'item',
          confine: true
        },
        legend: {
          show: false,
          orient: 'vertical',
          top: '20%',
          right: '20%'
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['50%', '50%'],
            data: this.option5Data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              label: {
                show: true
              }
            },
            label: {
              show: false,
              position: 'center',
              formatter: '{b}\n{c}吨',
              fontSize: '20',
              fontWeight: 'bold',
              lineHeight: 25,
              width: 100,
              overflow: 'truncate'
            }
          }
        ]
      }
      this.myChart5.setOption(this.option5)
      this.autoPlay(this.myChart5, this.option5, 'echarts5Interval')
    },
    renderMyChart6 () {
      this.myChart6 = echarts.init(document.getElementById('annular6'))
      let thisYear = new Date().getFullYear()
      let lastYear = new Date().getFullYear() - 1
      this.option6 = {
        animationDuration: 5000,
        legend: {
          show: true,
          right: '10'
        },
        tooltip: {
          trigger: 'axis'
        },
        color: ['#13B9FB'],
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 5,
            xAxisIndex: [0],
            zoomLock: true
          }
        ],
        grid: {
          left: '3%',
          right: '3%',
          bottom: '2%',
          top: '20%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0
            },
            data: this.option6XData
          }
        ],
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#8DAFDD'
            }
          }
        },
        series: [
          {
            name: lastYear,
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                offset: 0,
                color: '#00A3FF '
              },
              {
                offset: 1,
                color: '#2CB3FF'
              }
              ])
            },
            data: this.option6Bar1Data
          },
          {
            name: thisYear,
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                offset: 0,
                color: '#7B99FF  '
              },
              {
                offset: 1,
                color: '#5F83FF '
              }
              ])
            },
            data: this.option6Bar2Data
          }
        ]
      }
      this.myChart6.setOption(this.option6)
    },
    renderMyChart7 () {
      this.myChart7 = echarts.init(document.getElementById('annular7'))
      this.option7 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: true,
          right: '10'
        },
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 6,
            xAxisIndex: [0],
            zoomLock: true
          }
        ],
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          top: '25%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0
            },
            data: this.option7XData
          }
        ],
        yAxis: {
          type: 'value',
          name: '排放量/万吨',
          splitLine: {
            lineStyle: {
              color: '#8DAFDD'
            }
          }
        },
        series: [
          {
            type: 'bar',
            name: '排放量',
            barWidth: 15,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                offset: 0,
                color: '#00A3FF '
              },
              {
                offset: 1,
                color: '#2CB3FF'
              }
              ])
            },
            data: this.option7BarData
          },
          {
            type: 'line',
            name: '合格率',
            itemStyle: {
              color: '#00DBD4'
            },
            data: this.option7LineData
          }
        ]
      }
      this.myChart7.setOption(this.option7)
    },
    autoPlay (myChart, option, timer) {
      var _this = this
      let flag = true
      let charPiecurrentIndex = 0
      // 鼠标移动上去的时候的高亮动画
      myChart.on('mouseover', function (param) {
        flag = false
        clearInterval(_this[timer])
        // 取消之前高亮图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })

        charPiecurrentIndex = param.dataIndex
        // **解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })

        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
      })

      // 图标随窗口大小缩放
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      // 自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      _this[timer] = setInterval(chartHover, 2000)
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on('mouseout', function (param) {
        if (!flag) {
          _this[timer] = setInterval(chartHover, 2000)
          flag = true
        }
      })
    },
    tableRowClassName ({ row, column, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'table-row1'
      } else {
        return 'table-row2'
      }
    },
    getright_table (tableRef) {
      var isScroll = true
      // 拿到表格挂载后的真实DOM
      const table = this.$refs[tableRef]
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      this.addEvent(divData, 'mouseenter', function () {
        isScroll = false
      })
      this.addEvent(divData, 'mouseleave', function () {
        isScroll = true
      })
      this[tableRef + 'Interval'] = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop + 1 >= divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }
      }, 100)
    },
    addEvent (obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent('on' + sEvent, fn)
      } else {
        obj.addEventListener(sEvent, fn, false)
      }
    },
    activeClick1 (value) {
      this.activeTab1 = value
      this.$http.post(`/home/government/govEnvProtect/envProtect`,
        {
          gasType: this.activeTab1,
          airType: this.activeTab2
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.tableData1 = res.data.envProtect.gasRankList
          } else {
            this.$message({ message: res.message, type: 'warning' })
          }
        })
    },
    activeClick2 (value) {
      this.activeTab2 = value
      this.$http.post(`/home/government/govEnvProtect/envProtect`,
        {
          gasType: this.activeTab1,
          airType: this.activeTab2
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.tableData2 = res.data.envProtect.airQualityRankList
          } else {
            this.$message({ message: res.message, type: 'warning' })
          }
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  background-image: url("../../../assets/img/zf/bg.png");
  background-size: 100% 100%;
}
.box {
  border: 1px solid #ffffff;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 10px;
  margin-bottom: 10px;
}
.title {
  width: 100%;
  color: #1c4ca1;
  font-weight: 700;
}
.content {
  width: 100%;
  padding: 10px;
}
.content-body {
  padding: 5px;
  margin-top: 5px;
  overflow: hidden;
  > div {
    float: left;
    overflow: hidden;
  }
}
.craft-body {
  float: left;
  width: 47.5%;
  background: #D6EDFF;
  border-radius: 6px;
  padding: 10px;
  .craft-title {
    width: 100%;
    height: 16px;
    margin-bottom: 10px;
  }
  .craft-value {
    color: #00A3FF;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    text-align: right;
  }
}
.chemicals-body {
  width: 47.5%;
  background: #E0EBFE;
  border: 2px solid #CADFFF;
  border-radius: 6px;
  padding: 10px;
  .chemicals-value {
    color: #00A3FF;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    text-align: right;
  }
  .title-content {
    float: left;
    margin-left: 5px;
    color: #4B5463;
    font-size: 13px;
    line-height: 18px;
  }
}
.title-blue {
  width: 4px;
  height: 15px;
  background-color: #00A3FF;
  float: left;
}
.title-content {
  float: left;
  margin-left: 5px;
  color: #4B5463;
  font-size: 13px;
  line-height: 15px;
}

.source-body {
  float: right;
  width: 43%;
  height: 230px;
  padding-left: 15px;
  .source-part {
    width: 100%;
    height: 52px;
    background: #D3EBFF;
    border-radius: 8px;
    margin-bottom: 7px;
  }
  .source-title {
    float: left;
    width: 58%;
    font-size: 13px;
    color: #4B5463;
    line-height: 20px;
    padding-top: 5px;
    padding-left: 15px;
  }
  .source-value {
    float: right;
    font-size: 18px;
    font-weight: 600;
    color: #00A3FF;
    line-height: 38px;
    padding-top: 7px;
    padding-right: 15px;
  }
}
.legend-body {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 30%;
  height: 70px;
  .legend-content {
    width: 100%;
    height: 16px;
    margin-bottom: 5px;
    .legend-point {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      float: left;
      margin-right: 5px;
      margin-top: 4px;
    }
    .legend-title {
      font-size: 12px;
      color: #4B5463;
      float: left;
      line-height: 16px;
    }
    .legend-value {
      float: right;
      font-size: 14px;
      font-weight: 600;
    }
  }
}
.tabs {
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
  > div {
    float: left;
    color: #7db2d0;
    padding: 0 7px;
    cursor: pointer;
  }
}
.selectActive {
  color: #00a3ff !important;
  font-weight: 600;
}
/deep/ .table-row1 {
  background-color: #EBF3FF;
}
/deep/ .table-row2 {
  background-color: #D6E6FF;
}
/deep/ .gutter {
  background-color: #CADFFF;
}
/deep/ .el-table__body-wrapper {
  background-color: rgb(234, 242, 255);
}

.main ::-webkit-scrollbar {/*滚动条整体样式*/
  width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.main ::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 90, 255, 0.1);
}
.main ::-webkit-scrollbar-track {/*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 90, 255,0.2);
  border-radius: 10px;
  background: #EDEDED;
}
</style>
